<template>
  <div class="printView">
    <h1>打印预览</h1>
    <select v-model="ipAndPort" id="ipAndPort" @change="setClodopJS"  >
      <option value="localhost:18000">本地</option> 
      <option value="192.168.1.118:18000">杨璐璐</option>
        
    </select>

    <select id = "Select01" v-model="printerIndex"  @change="demoCreatePagSizeList()">
      <option></option>
      
    </select>
   
    
    
    
    
    
    <select v-model="pageSize" id = "Select02">
      <option></option>
      
    </select>

    <div id="p1">
      发射点发生
    </div>
    <input v-model = "modelValue">
    <ul>
      <li v-for="(item,index) in printList" :key="index">
        <el-card>
          <div   :id = "'print' + index">
            <table border="1"  style="border-collapse:collapse;  "  >
                
               <tr>
                 <th rowspan="6" ><img :id="'img' + index" v-bind:src="item.imgSrc"> </th>
                   <th style="  text-align:left " >
                   <span>PO: </span>
                   <span>{{item.requestDetailDetailNo}}</span>
                  </th>
               </tr>
              

                <tr>
                 <th  style="  text-align:left ">
                   <span>入库单: </span>
                   <span>{{item.detailNo}}</span>
                  </th>
                </tr>

                <tr>
                 <th  style="  text-align:left ">
                   <span>料号: </span>
                   <span>{{item.itemCode}}</span>
                  </th>
                </tr>
                <tr>
                 <th  style="  text-align:left ">
                   <span>数量: </span>
                   <span>{{item.quantity}}</span>
                  </th>
                </tr>
                <tr>
                 <th  style="  text-align:left ">
                   <span>生产日期: </span>
                   <span>{{item.time1}}</span>
                  </th>
                </tr>

                   
                
             </table>
            <div  style="display: none">
              <div :id="'qrcode' + index"></div>
            </div>
             
          </div>
        </el-card>
        <el-card>
          <p>
            <span>PO: </span>
            <span>{{item.requestDetailDetailNo}};</span>
            <span style="display: inline-block;width: 20px;"></span>
            <span>入库单: </span>
            <span>{{item.detailNo}};</span>
            <span style="display: inline-block;width: 20px;"></span>
            <span>料号: </span>
            <span>{{item.itemCode}};</span>
          </p>
          <p>
            <span>数量: </span>
            <el-input-number v-model="item.quantity" @blur="updateQcCode" :min="0" size="mini" style="width: 200px;"></el-input-number>
            <span>厂家批号: </span>
            <el-input v-model="item.batchNo" @blur="updateQcCode" size="mini" style="width: 200px;"></el-input>
            <span>生产日期: </span>
            <el-input v-model="item.time1" @blur="updateQcCode" size="mini" style="width: 200px;"></el-input>
            <span>过期日期: </span>
            <el-input v-model="item.time2" @blur="updateQcCode" size="mini" style="width: 200px;"></el-input>
          </p>
          <p>
            <span>打印张数: </span>
            <el-input-number v-model="item.printQuantity" :min="1" size="mini"></el-input-number>
          </p>
           
        </el-card>
      </li>
    </ul> 

    
    

    <div class="createFootBox clearFloat" :style="{width: isCollapse ? 'calc(100% - 104px)' : 'calc(100% - 240px)'}">
      <div class="leftFloat">
        <el-button type="info" @click="$router.go(-1)">返 回</el-button>
      </div>
      <div class="rightFloat">
        <el-button type="primary" @click="demoPrint(false)">打印</el-button>
        <el-button type="primary" @click="demoPrint(true)">预览</el-button>
       
      </div>

     
    </div>

    <object  id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0>
      <embed id="LODOP_EM" type="application/x-print-lodop" width=0 height=0></embed>
    </object>

  </div>
</template>

<script>
import pako from "pako";

export default {
  name: "PrintView",
  data() {
    return {
      modelValue: "",
      ipAndPort: "localhost:8001",
      printerIndex: "2",
      pageSize: "80*60",

      printQuantity: 1,
      printList: this.$route.params.printList,
      batchPrintList: [
        {
          batchName: "IB001",
          orgName: "fsa",
          itemCode: "fsad",
          quantity: 12,
        },
      ],
      head: null,
      oscript: null,
      LODOP1: null,
      LODOP2: null,
    };
  },
  inject: ["home"],
  computed: {
    isCollapse() {
      return this.home.leftMenuIsCollapse;
    },
    stringPrintList() {
      let list = PF.JSON(this.printList);
      let arr = [];
      let str = "";
      for (let i = 0; i < list.length; i++) {
        str = [];
        for (let key in list[i]) {
          if (key !== "poNo") {
            str += "&";
          }
          str += list[i][key];
        }
        // arr.push(JSON.stringify(list[i]));
        arr.push(str);
      }
      return arr;
    },
  },
  methods: {
    addPrintQuantity() {
      let printList = PF.JSON(this.printList);
      let arr = [];
      for (let i = 0; i < printList.length; i++) {
        arr.push({
          detailNo: printList[i].detailNo,
          requestDetailDetailNo: printList[i].requestDetailDetailNo,
          itemCode: printList[i].itemCode,
          printQuantity: 1,
          quantity: 1,
          batchNo: "",
          time1: "",
          time2: "",
        });
        printList[i].printQuantity = 1;
        printList[i].batchNo = "";
        printList[i].time1 = "";
        printList[i].time2 = "";
        printList[i].code = "";
      }
      this.printList = arr;
    },

    updateQcCode() {
      var that = this;
      let codes = PF.JSON(this.printList);
      for (let i = 0; i < codes.length; i++) {
        // let text = codes[i].detailNo;
        // let text = pako.deflate(JSON.stringify(codes[i]), { to: 'string' });

        //let text = this.printList[i].code = PF.codeProcess(codes[i]);
        // let text2 = PF.codeToObj(text);

        // let text2 = JSON.parse(pako.inflate(text, { to: 'string' }));
        var item = this.printList[i];
        let text = item.itemCode + ":" + item.detailNo + ":" + item.quantity;
        $("#qrcode" + i).html("");
        $("#qrcode" + i).qrcode({
          render: "canvas", // 渲染方式有table方式（IE兼容）和canvas方式
          width: 150, //宽度
          height: 150, //高度
          text: text, //内容
          typeNumber: -1, //计算模式
          correctLevel: 2, //二维码纠错级别
          background: "#ffffff", //背景颜色
          foreground: "#000000", //二维码颜色
        });

        var qrcode = document
          .getElementById("qrcode" + i)
          .getElementsByTagName("canvas")[0];

        var imgSrc = qrcode.toDataURL("image/png");
        that.printList[i].imgSrc = imgSrc;
        that.modelValue = that.printList[i].imgSrc;
        that.modelValue = "";
      }
    },
    toPrint() {
      let printList = this.printList;
      let printArr = [];
      for (let i = 0; i < printList.length; i++) {
        for (let j = 0; j < printList[i].printQuantity; j++) {
          printArr.push(printList[i]);
        }
      }
      this.$router.push({ name: "printPage", params: { printArr: printArr } });
    },

    setClodopJS: function () {
      //页面初始化时注册打印服务
      var that = this;
      that.demoSetClodopJS(that.ipAndPort);
    },

    //根据所选的IP和端口号注册打印服务
    demoSetClodopJS: function (strSrc) {
      var that = this;
      strSrc = "http://" + strSrc + "/CLodopfuncs.js?priority=1";
      var oscript = that.demoCreateCLodopJSscript(strSrc);

      oscript.onload = oscript.onreadystatechange = function () {
        if (!oscript.readyState || /loaded|complete/.test(oscript.readyState))
          that.demoCreatePrinterList();
      };
    },

    demoCreateCLodopJSscript: function (strSrc) {
      var ScriptSS = document.getElementsByTagName("script");
      for (var i in ScriptSS) {
        if (ScriptSS[i].src && ScriptSS[i].src.indexOf("CLodopfuncs.js") >= 0) {
          if (ScriptSS[i].parentNode)
            ScriptSS[i].parentNode.removeChild(ScriptSS[i]);
        }
      }
      var oscript = document.createElement("script");
      if (strSrc.indexOf("src=") >= 0) {
        strSrc = strSrc.match(/=[\',\"][^\',^\"].*(?=[\',\"])/i);
        strSrc = strSrc[0].slice(2);
      }
      oscript.src = strSrc;
      var head =
        document.head ||
        document.getElementsByTagName("head")[0] ||
        document.documentElement;
      head.insertBefore(oscript, head.firstChild);
      return oscript;
    },

    //获取打印机列表
    demoCreatePrinterList: function () {
      var ele = document.getElementById("Select01");
      CLODOP.Create_Printer_List(ele);
      document.getElementById("Select01").value = this.printerIndex;
      this.demoCreatePagSizeList();
    },

    //获取打印机纸张大小
    demoCreatePagSizeList: function () {
      var oSelect = document.getElementById("Select02");
      var iPrintIndex = document.getElementById("Select01").value;
      CLODOP.Create_PageSize_List(oSelect, iPrintIndex);
      document.getElementById("Select02").value = this.pageSize;
    },

    //打印
    demoPrint: function (toPrview) {
      var printerIndex = document.getElementById("Select01").value;

      var pageSize = document.getElementById("Select02").value;

      var strHTML = document.getElementById("p1").innerHTML;
      LODOP.PRINT_INITA(10, 2, 800, 600, "测试C-Lodop");
      LODOP.SET_PRINTER_INDEXA(5);
      LODOP.SET_PRINT_PAGESIZE(0, 0, 0, "信纸");
      LODOP.ADD_PRINT_HTM(100, 200, "100%", "100%", strHTML);

      //LODOP.SET_PRINT_MODE("PRINT_NOCOLLATE",1);//设置为非逐份打印，1-1  2-2  3-3
      //   LODOP.PRINT();
      if (toPrview) LODOP.PREVIEW();
      else LODOP.PRINT();
    },

    initWebSocket() {
      if ("WebSocket" in window) {
        this.websocket = new WebSocket("ws://localhost:8002/wms/printTest");
      }
      this.websocket.onmessage = this.websocketonmessage;
      this.websocket.onopen = this.websocketonopen;
      this.websocket.onerror = this.websocketonerror;
      this.websocket.onclose = this.websocketclose;
    },

    websocketonopen() {
      //连接建立之后执行send方法发送数据
      let actions = { test: "12345" };
      this.websocketsend(JSON.stringify(actions));
    },
    websocketonerror() {
      //连接建立失败重连
      this.initWebSocket();
    },
    websocketonmessage(e) {
      //数据接收

      document.getElementById("p1").innerHTML = e.data;

      var printerIndex = document.getElementById("Select01").value;

      var pageSize = document.getElementById("Select02").value;

      var strHTML = document.getElementById("p1").innerHTML;
      LODOP.PRINT_INITA(10, 2, 800, 600, "测试C-Lodop");
      LODOP.SET_PRINTER_INDEXA(printerIndex);
      LODOP.SET_PRINT_PAGESIZE(0, 0, 0, pageSize);
      LODOP.ADD_PRINT_HTM(100, 200, "100%", "100%", e.data);
      // LODOP.SET_PRINT_COPIES(Number(this.printList[i].printQuantity));//指定份数

      //LODOP.SET_PRINT_MODE("PRINT_NOCOLLATE",1);//设置为非逐份打印，1-1  2-2  3-3

      LODOP.PRINT();
      //  LODOP.PREVIEW();
    },
    websocketsend(Data) {
      //数据发送
      this.websocket.send(Data);
    },
    websocketclose(e) {
      //关闭
      console.log("断开连接", e);
    },
  },
  created() {
    if (!PF.isNull(this.printList)) {
      this.$router.go(-1);
      return false;
    }
    this.addPrintQuantity();

    // this.setClodopJS();
    // this.initWebSocket();
  },
  mounted() {
    this.updateQcCode();
    this.demoCreatePrinterList();
  },
};
</script>

<style scoped lang="less">
.printView {
  padding-bottom: 100px;
  h1 {
    margin: 20px;
  }
  ul {
    width: 100%;
    > li {
      .el-card {
        p {
          margin-bottom: 10px;
        }
      }
      .el-card:first-child {
        width: 400px;
        float: left;
        .leftFloat {
          width: 80px;
        }
        .rightFloat {
          width: calc(80% - 100px);
        }
      }
      .el-card:last-child {
        width: calc(100% - 420px);
        float: right;
      }
    }
    > li:after {
      display: block;
      clear: both;
      content: "";
      visibility: hidden;
      height: 0;
    }
    > li {
      zoom: 1;
    }
  }
}
</style>
